{% extends "layouts/base.html" %}
{% load i18n static %}

{% block content %}
<div class="container my-4">
  <h2 class="text-center mb-4">{% trans "Criar Leilão" %}</h2>

  <form method="POST" class="card p-4 bg-dark text-light border-secondary">
    {% csrf_token %}

    <div class="mb-3">
      <label for="character_name" class="form-label">{% trans "Personagem" %}</label>
      <select name="character_name" id="character_name" class="form-select" required onchange="atualizarItens()">
        <option value="" disabled selected>{% trans "Selecione o personagem" %}</option>
        {% for inv in inventories %}
          <option value="{{ inv.character_name }}">{{ inv.character_name }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="mb-3">
      <label for="item_id" class="form-label">{% trans "Item" %}</label>
      <select name="item_id" id="item_id" class="form-select" required>
        <option value="" disabled selected>{% trans "Selecione o item" %}</option>
      </select>
    </div>

    <div id="item_preview" class="d-flex align-items-center mt-3" style="display: none;">
      <img id="item_image" src="/static/assets/img/l2/icons/default.jpg" alt="" class="me-3 rounded border border-secondary" style="width: 64px; height: 64px;">
      <strong id="item_name" class="fs-5"></strong>
    </div>

    <div class="mb-3 mt-4">
      <label for="quantity" class="form-label">{% trans "Quantidade" %}</label>
      <input type="number" name="quantity" id="quantity" class="form-control" required>
    </div>

    <div class="mb-3">
      <label for="starting_bid" class="form-label">{% trans "Lance Inicial (R$)" %}</label>
      <input type="number" step="0.01" name="starting_bid" id="starting_bid" class="form-control" required>
    </div>

    <div class="mb-3">
      <label for="duration_hours" class="form-label">{% trans "Duração (horas)" %}</label>
      <input type="number" name="duration_hours" id="duration_hours" class="form-control" required>
    </div>

    <button type="submit" class="btn btn-primary w-100">
      <i class="bi bi-plus-circle"></i> {% trans "Criar Leilão" %}
    </button>
  </form>
</div>

<script>
  const inventories = {{ inventories_json|safe }};

  function atualizarItens() {
    const personagemSelecionado = document.getElementById('character_name').value;
    const selectItem = document.getElementById('item_id');

    // Limpa opções antigas
    selectItem.innerHTML = '<option value="" disabled selected>Selecione o item</option>';

    const inventario = inventories.find(inv => inv.character_name === personagemSelecionado);

    if (inventario) {
      inventario.items.forEach(item => {
        const option = document.createElement('option');
        option.value = item.item_id;
        option.textContent = `${item.item_name} (Qtd: ${item.quantity})`;
        selectItem.appendChild(option);
      });
    }

    // Esconde o preview até escolher um item
    document.getElementById('item_preview').style.display = 'none';
  }

  document.getElementById('item_id').addEventListener('change', function() {
    const personagemSelecionado = document.getElementById('character_name').value;
    const itemSelecionado = this.value;

    const inventario = inventories.find(inv => inv.character_name === personagemSelecionado);
    const item = inventario.items.find(it => it.item_id == itemSelecionado);

    if (item) {
      // Atualiza imagem
      const img = document.getElementById('item_image');
      img.src = `/static/assets/img/l2/icons/5-${item.item_id}.jpg`;
      img.onerror = () => {
        img.src = `/static/assets/img/l2/icons/default.jpg`;
      };

      // Atualiza nome
      document.getElementById('item_name').textContent = item.item_name;

      // Mostra preview
      document.getElementById('item_preview').style.display = 'flex';
    }
  });
</script>
{% endblock %}
